<template>
    <van-nav-bar
  title="分类"
/>

    <div style="display: flex;">
<div style="width: 100px;">
    <van-sidebar v-model="active">
  <van-sidebar-item :title="item.cat_name" v-for="item in sidebar"/>
</van-sidebar>

</div>
<!-- <div style="flex: 1;">
    <div style="width: 100%;">
        <div v-for="item in sidebar[active]?.children">
            <h3>{{item.cat_name}}</h3>
            <van-grid :column-num="3">
  <van-grid-item v-for="value in item.children" :key="value" :icon="value.cat_icon" :text="value.cat_name" @click="pushgoods(value.cat_id)"/>
</van-grid>

        </div>
    </div>
</div> -->
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    offset="20"
  >
    <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
    <div style="flex: 1;">
    <div style="width: 100%;">
        <div v-for="item in sidebar[active]?.children">
            <h3>{{item.cat_name}}</h3>
            <van-grid :column-num="3">
  <van-grid-item v-for="value in item.children" :key="value" :icon="value.cat_icon" :text="value.cat_name" @click="pushgoods(value.cat_id)"/>
</van-grid>

        </div>
    </div>
</div>
    
  </van-list>
</van-pull-refresh>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import {classifyApi} from '../../request/api'
import {useRouter} from 'vue-router'
import { showToast } from 'vant';
const router=new useRouter()
const active=ref(0)
const sidebar=ref([])
classifyApi().then(res=>{
    sidebar.value=res.data.message
})
const pushgoods=(cid)=>{
    router.push({
        path:'/goods',
        query:{
            cid
        }
    })
}
const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);

    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 20) {
          finished.value = true;
          showToast('没有更多数据了')
          return
        }
      }, 1000);
    };

    const onRefresh = () => {
      // 清空列表数据
      finished.value = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };

</script>

<style lang="scss" scoped>

</style>